<template>
  <div class="ProjectManage h-full bg-white wrapper-md">
    <a-tabs v-model="activeKey" hide-add type="editable-card" @edit="onEdit">
      <a-tab-pane
        v-for="pane in panes"
        :key="pane.key"
        :tab="pane.title"
        :closable="pane.closable"
      >
        <div v-if="pane.title === '项目管理'">
          <div class="button">
            <a-button type="primary" @click="createNew"> 新建 </a-button>
            <a-button type="primary" @click="refresh"> 刷新 </a-button>
          </div>
          <div class="list">
            <div v-if="!projectList.length" class="tip">暂无数据</div>
            <div v-else>
              <div
                class="item"
                v-for="item in projectList"
                :key="item.id"
                @dblclick="toProjectDetail(item)"
              >
                <a-row>
                  <a-col :span="14"> 项目名称：{{ item.projectName }} </a-col>
                  <a-col :span="4"> 创建人：{{ item.createUser }} </a-col>
                  <a-col :span="6"> 创建时间：{{ moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') }} </a-col>
                </a-row>
                <p></p>
                <a-row>
                  <a-col :span="8"> 接口数量：{{ item.interfaceCount }} </a-col>
                  <a-col :span="16"> 描述：{{ item.description }} </a-col>
                </a-row>
              </div>
            </div>
          </div>
          <div class="footer">
            <span> 共{{ pagination.total }}条数据 </span>
            <a-pagination
              v-model="pagination.current"
              :page-size-options="pagination.pageSizeOptions"
              :total="pagination.total"
              show-size-changer
              :page-size="pagination.pageSize"
              @change="onChange"
              @showSizeChange="onShowSizeChange"
            >
            </a-pagination>
          </div>
        </div>
        <div v-if="pane.project">
          <ProjectManageDetail
            style="height: 88vh;overflow-y: auto;"
            :project="pane.project"
            :type="pane.type"
            @addInterface="addInterface(pane.project)"
            @toProjectDetail="toProjectDetail(pane.project)"
          >
          </ProjectManageDetail>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import ProjectManageDetail from '@v/investmentOnline/interfaceManage/ProjectManageDetail'
  import orupService from '@/api/orupService'
  import moment from 'moment'

  export default {
    name: 'ProjectManage',
    components: {ProjectManageDetail},
    data() {
      return {
        activeKey: '1',
        newTabIndex: 0,
        projectList: [],
        panes: [
          {
            title: '项目管理',
            content: '',
            key: '1',
            closable: false
          }
        ],
        pagination: {
          current: 1,
          pageSizeOptions: ['10', '20'],
          total: 0,
          pageSize: 10
        }
      }
    },
    created() {
      this.getData()
    },
    methods: {
      moment,
      onEdit(targetKey, action) {
        this[action](targetKey)
      },
      remove(targetKey) {
        let activeKey = this.activeKey
        let lastIndex
        this.panes.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1
          }
        })
        const panes = this.panes.filter((pane) => pane.key !== targetKey)
        if (panes.length && activeKey === targetKey) {
          if (lastIndex >= 0) {
            activeKey = panes[lastIndex].key
          } else {
            activeKey = panes[0].key
          }
        }
        this.panes = panes
        this.activeKey = activeKey
      },
      getData() {
        const params = {
          pagination: this.pagination.current - 1,
          pageSize: this.pagination.pageSize
        }
        orupService.projectQuery(params).then(res => {
          console.log(res)
          this.projectList = res
          this.pagination.total = res.length
        })
      },
      onChange(page, pageSize) {
        this.pagination.current = page
        this.getData()
      },
      onShowSizeChange(current, pageSize) {
        this.pagination.current = 1
        this.pagination.pageSize = pageSize
        this.getData()
      },
      toProjectDetail(project) {
        const panes = this.panes
        let addPane = true
        for (let i = 0; i < panes.length; i++) {
          if (panes[i].project && panes[i].project.id === project.id) {
            addPane = false
            this.activeKey = panes[i].key
            break
          }
        }
        if (addPane) {
          const activeKey = `newTab${this.newTabIndex++}`
          panes.push({
            title: project.projectName,
            content: '',
            key: activeKey,
            project: project,
            type: 'detail'
          })
          this.panes = panes
          this.activeKey = activeKey
        }
      },
      addInterface(project) {
        const panes = this.panes
        const activeKey = `newTab${this.newTabIndex++}`
        panes.push({
          title: '新建接口',
          content: '',
          key: activeKey,
          project: project,
          type: 'newInterface'
        })
        this.panes = panes
        this.activeKey = activeKey
      },
      createNew() {

      },
      refresh() {

      }
    }
  }
</script>

<style lang="less" scoped>
  .ProjectManage {
    width: 100%;
    height: 100%;
    .button {
      padding-top: 20px;
      button {
        margin-right: 10px;
      }
    }
    .list {
      padding: 20px 0;
      height: 73vh;
      overflow-y: auto;
      .tip {
        text-align: center;
        color: rgba(0, 0, 0, 0.25);
      }
      .item {
        width: 98%;
        height: 100px;
        border: 1px solid #f0f0f0;
        margin-bottom: 24px;
        padding: 20px;
        cursor: pointer;
        &:hover {
          background-color: #f0fcff;
        }
      }
    }
    .footer {
      width: 100%;
      padding-top: 20px;
      padding-right: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      span {
        margin-right: 10px;
      }
    }
  }
</style>
